<template>
    <div class="zxzt">
        <div class="wrapper">
            <div class="top">
                <p class="tit">最新专题</p>
                <p class="all">查看全部 &gt;</p>
            </div>
            <ul class="con_list">
                <li v-for="item in newList" :key="item.id">
                    <img :src="item.cover" alt="">
                    <div class="po">
                        <p class="name">{{item.title}}</p>
                        <p class="dic">{{item.summary}}</p>
                    </div>
                    <div class="bot">
                        <p><i class="el-icon-thumb"></i>
                        <span>{{item.collectNum}}</span></p>
                        <p><i class="el-icon-view"></i>
                        <span>{{item.viewNum}}</span></p>
                        <p><i class="el-icon-chat-dot-square"></i>
                        <span>{{item.replyNum}}</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeNew",
    data(){
        return {
            newList:[]
        }
    },
    async created(){
        const res=await this.$http.homeNewApi();
        // console.log(res);
        this.newList=res.data.result;
    }
}
</script>

<style lang="less" scoped>
.zxzt{
    width:100%;
    background:#f5f5f5;
    padding-bottom:40px;
    .wrapper{
        padding:0 250px;
        .top{
            height:80px;
            line-height:40px;
            display:flex;
            justify-content: space-between;
            .tit{
                font-size:30px;
            }
        }
        .con_list{
            list-style:none;
            display:flex;
            justify-content: space-between;
            li{
                width:32%;
                position:relative;
                img{
                    width:100%;
                }
                .po{
                    width:calc(100% - 20px);
                    height:100px;
                    background:rgba(0,0,0,.3);
                    position:absolute;
                    bottom:70px;
                    left:0px;
                    padding-left:20px;
                    .name{
                        width:300px;
                        height:30px;
                        font-size:24px;
                        color:#fff;
                        overflow:hidden;
                    }
                    .dic{
                        width:300px;
                        height:25px;
                        overflow:hidden;
                        color:#eee;
                        font-size:20px;
                        margin-top:-15px;
                    }
                }
                .bot{
                    height:70px;
                    // line-height:70px;
                    background:#fff;
                    margin-top:-4px;
                    display:flex;
                    justify-content: space-between;
                    padding:0 20px;
                    p{
                        margin-top:20px;
                        i{
                            font-size:20px;
                        }
                        span{
                            margin-left:5px;
                        }
                        &:nth-child(2){
                            margin-left:-150px;
                        }
                    }
                }
            }
            li:hover{
                box-shadow:-5px 5px 6px #eee;
                margin-top:-5px;
                transition:.3s;
            }
            li:hover .po{
                bottom:75px;
                transition:.3s;
            }
        }
    }
}
</style>